<template>
  <div class="editor-test">
    <h2>WangEditor v5 测试页面</h2>
    
    <a-card title="编辑器测试" style="margin-bottom: 20px;">
      <WangEditor 
        v-model:value="content" 
        :height="400"
        :imageSize="5"
        :videoSize="50"
        placeholder="请输入内容进行测试..."
        @change="handleChange"
      />
    </a-card>

    <a-card title="内容预览">
      <div class="content-preview" v-html="content"></div>
    </a-card>

    <a-card title="HTML源码" style="margin-top: 20px;">
      <pre>{{ content }}</pre>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import WangEditor from '@/components/editor/WangEditor.vue';

const content = ref('<p>这是一个测试内容</p>');

const handleChange = (html) => {
  console.log('编辑器内容变化:', html);
};
</script>

<style lang="less" scoped>
.editor-test {
  padding: 20px;

  .content-preview {
    min-height: 200px;
    padding: 16px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fafafa;

    // 富文本内容样式
    :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
      margin: 16px 0 8px 0;
      color: #333;
      font-weight: 600;
    }
    
    :deep(p) {
      margin: 8px 0;
      line-height: 1.6;
      color: #666;
    }
    
    :deep(ul), :deep(ol) {
      margin: 8px 0;
      padding-left: 20px;
      
      li {
        margin: 4px 0;
        line-height: 1.6;
        color: #666;
      }
    }
    
    :deep(img) {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
      margin: 8px 0;
    }
    
    :deep(video) {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
      margin: 8px 0;
    }
    
    :deep(blockquote) {
      margin: 16px 0;
      padding: 12px 16px;
      background: #f6f8fa;
      border-left: 4px solid #1890ff;
      color: #666;
    }
    
    :deep(code) {
      padding: 2px 4px;
      background: #f5f5f5;
      border-radius: 3px;
      font-family: 'Courier New', monospace;
      color: #e74c3c;
    }
    
    :deep(pre) {
      margin: 16px 0;
      padding: 12px;
      background: #f8f8f8;
      border-radius: 6px;
      overflow-x: auto;
      
      code {
        background: none;
        color: #333;
        padding: 0;
      }
    }
    
    :deep(table) {
      width: 100%;
      border-collapse: collapse;
      margin: 16px 0;
      
      th, td {
        padding: 8px 12px;
        border: 1px solid #e8e8e8;
        text-align: left;
      }
      
      th {
        background: #fafafa;
        font-weight: 600;
      }
    }
  }

  pre {
    background: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.4;
  }
}
</style>
